<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Status Menu</title>

    <style type="text/css">
        body {
            background-color: rgb(31, 103, 179);
            color: #FFFFFF;
            font-family: "Segoe UI", "Arial", "Microsoft Yahei", Helvetica, sans-serif;
            margin-left: 100px;
            padding: 90px 0;
        }

        .face {
            font-size: 100px;
        }

        p {
            font-size: 24px;
            padding-top: 8px;
        }

        a {
            color: #FFFFFF;
            text-decoration: none;
        }

        a:visited {
            color: #FFFFFF;
        }

        .tips {
            font-size: 16px
        }

        @media screen and (max-width: 600px) {
            body {
                margin: 0 10px;
            }

            p {
                font-size: 18px;
                line-height: 30px;
            }

            .tips {
                display: inline-block;
                padding-top: 10px;
                font-size: 14px;
                line-height: 20px;
            }
        }
    </style>
</head>

<body>
    <span class="face">:)</span>
    <p>Hello! Till now, our status monitors are implemented by 2 ways. Please choose one:<br>
        <p>
            <a href="https://stats.uptimerobot.com/vRXRluWnx9">UptimeBot</a>
            <br>
            <a href="#/">Upptime (Page - Closed)</a>
            <br>
            <a href="/">Back home</a>
        </p>

        <span class="tips">If you'd like to know more, you can search online later for this message: HTTP CODE 418 I'M A TEAPOT</span>
    </p>
</body>

</html>
